<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
		<meta name="format-detection" content="telephone=no">
		<title></title>
		<link rel="stylesheet" href="../css/default.min.css" />
		<link rel="stylesheet" href="../frozen/css/frozen.css">
		<style>
			.ui-scroller {
				width: auto;
				margin: 0px;
				padding: 0px;
				overflow: hidden;
			}
			
			.ui-scroller ul {
				margin-left: 15%;
				margin-right: 15%;
			}
			
			.ui-scroller li {
				/*margin-bottom: 10px;*/
				line-height: 32px;
				opacity: .3;
			}
			
			.ui-scroller li.sel {
				border-top: 1px solid #31b6e7;
				border-bottom: 1px solid #31b6e7;
				opacity: 1;
			}
			
			.scrolllist {
				background-color: rgba(0, 0, 0, .4);
				height: 100%;
				width: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 9999;
			}
			
			.scrolllist .ui-scrolllist {
				margin: auto;
				text-align: center;
				width: 60%;
				height: 204px;
				background-color: rgba(255, 255, 255, 1);
				border-radius: 3px;
				margin-top: 50%;
			}
			
			.scrolllist-title {
				height: 36px;
				line-height: 36px;
				padding: 0;
				border-bottom: 2px solid #31b6e7;
				font-size: 18px;
			}
			
			.dwbc {
				border-top: 1px solid #dbdbdb;
				padding: 0;
				text-align: center;
				clear: both;
				line-height: 36px;
			}
			
			.dwbw {
				display: inline-block;
				float: left;
				width: 49.5%;
				position: relative;
				z-index: 5;
			}
			
			.dwb-s {
				border-right: 1px solid #dbdbdb;
			}
			
			.android-ics .dw .dwb {
				height: 36px;
				line-height: 36px;
				padding: 0;
				margin: 0;
				font-weight: normal;
				text-shadow: none;
				box-shadow: none;
				border-radius: 0;
				-webkit-border-radius: 0;
				-webkit-box-shadow: none;
			}
			
			.scrolllist-btns {
				height: 36px;
			}
			
			.scrolllist-items {
				height: 129px;
				overflow: hidden;
			}
			
			.scrolllist-btns .dwb-s {
				border-bottom-left-radius: 3px;
			}
			
			.scrolllist-btns .dwb-c {
				border-bottom-right-radius: 3px;
			}
		</style>
	</head>

	<body>
		<div class="scrolllist">
			<div class="ui-scrolllist">
				<div class="scrolllist-title">选择受益人</div>
				<div class="scrolllist-items ui-scroller"></div>
				<div class="scrolllist-btns dwbc">
					<span class="dwbw dwb-s"><span class="dwb">确定</span></span>
					<span class="dwbw dwb-c"><span class="dwb">取消</span></span>
				</div>
			</div>
		</div>
		<div class="ui-dialog">
			<div class="ui-dialog-cnt">
				<div class="ui-dialog-bd">
					<div>
						<h4>标题</h4>
						<div>内容</div>
					</div>
				</div>
				<div class="ui-dialog-ft ui-btn-group">
					<button type="button" data-role="button" class="select" id="dialogButton">关闭</button>
				</div>
			</div>
		</div>
	</body>
	<script src="../js/zepto.min.js"></script>
	<script src="../frozen/js/frozen.js"></script>
	<script src="../js/lib/scrolllist.js"></script>
	<script>
		$(function() {
			var scl = $('body').scrolllist({
				data: [{
					text: '老公',
					value: '1'
				}, {
					text: '老婆',
					value: '2'
				}, {
					text: '儿子',
					value: '3'
				}, {
					text: '女儿',
					value: '4'
				}]
			});
			console.log(scl);
			var dia = $.dialog({
				title: '测试',
				content: '<ul><ul>',
				button: ["确认", "取消"]
			});
			dia.on("dialog:action", function(e) {
				console.log(e.index)
			});
			dia.on("dialog:hide", function(e) {});
		});
	</script>

</html>